<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./font-awesome/4.5.0/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="./css/fonts.googleapis.com.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="./css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

    <!--[if lte IE 9]>
      <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
    <![endif]-->
    <link rel="stylesheet" href="./css/ace-skins.min.css" />
    <link rel="stylesheet" href="./css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
      <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="./js/ace-extra.min.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/highcharts.js"></script>
  <script type="text/javascript" src="./js/exporting.js"></script>
</head>
<body class="no-skin">
    <div id="navbar" class="navbar navbar-default          ace-save-state" style="height:50px;">
      <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
          <span class="sr-only">Toggle sidebar</span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
          <a href="index.html" class="navbar-brand">
            <small>
              <i class="fa fa-leaf"></i>
              Ace Admin
            </small>
          </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
          <ul class="nav ace-nav">

            <li class="light-blue dropdown-modal">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                <img class="nav-user-photo" src="./images/avatars/user.jpg" alt="Jason's Photo" />
                <span class="user-info">
                  Welcome
                </span>

                <i class="ace-icon fa fa-caret-down"></i>
              </a>

              <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                <li>
                  <a href="#">
                    <i class="ace-icon fa fa-cog"></i>
                     退出登录
                  </a>
                </li>

              </ul>
            </li>
          </ul>
        </div>
      </div><!-- /.navbar-container -->
    </div>
<div id="container" style="width: 100%; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
  var title = {
    text: '转码任务'   
  };
  var subtitle = {
    text: '2017-07-06--2017-07-12'
  };
  var credits = {  
    enabled: false     //不显示LOGO 
  }; 
  var xAxis = {
  // categories: ['07-06', '07-07', '07-08', '07-09', '07-10', '07-11',  '07-12'],  
    labels: {   
      formatter: function() {
        return categories[this.value];
      }
     },
    tickInterval:1,
    gridLineColor: '#eee',
    gridLineWidth: 1,
    minorGridLineColor:'red',
    minorGridLineDashStyle :'solid'
  };
  var tooltip = {
    valueSuffix: '温度',
  };
  var exporting = {
                    //enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效
                    buttons:{    //配置按钮选项
                        printButton:{    //配置打印按钮
                            width:50,
                            symbolSize:20,
                            borderWidth:2,
                            borderRadius:0,
                            hoverBorderColor:'red',
                            height:30,
                            symbolX:25,
                            symbolY:15,
                            x:-200,
                            y:20
                        },
                        exportButton:{    //配置导出按钮
                            width:50,
                            symbolSize:20,
                            borderWidth:2,
                            borderRadius:0,
                            hoverBorderColor:'red',
                            height:30,
                            symbolX:25,
                            symbolY:15,
                            x:-150,
                            y:20
                        },
                    },
                    filename:'52wulian.org',//导出的文件名
                    type:'image/png',//导出的文件类型
                    width:800    //导出的文件宽度
                  };
   var yAxis = {
      title: {
         text: 'Temperature (温度)'
      },
  
       max: 25,    //设置Y轴最大值为“max”
       tickInterval:5    //设置Y轴坐标值的间隔固定为10
   };
   //设置标示线
   var poltLines=[{
       color:'red',
       dashStyle:'solid',
       value:21.5,
       width:2

   }];
   var plotOptions = {
      line: {
         dataLabels: {
            enabled: true
         },   
         enableMouseTracking: false
      }
   };
   var categories = ['07-06', '07-07', '07-08', '07-09', '07-10', '07-11',  '07-12'];
   var series= [{
         name: 'Tokyo',
         data: [0, 0,0, 0, 0, 21.5, 0]
      }
   ];
   var credits = {
     enabled: false
   };
   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.credits = credits;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);
  
});
</script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
